import { defineNuxtPlugin } from "nuxt/app";
import Loading from "../components/public/showLoading.vue";
import { createVNode, render } from "vue";

/**
 * @description: 动画
 * @return {*}
 * @author: zhj1214
 */
// import { Vue3Lottie } from "vue3-lottie";
import Vue3Lottie from "vue3-lottie";

/**
 * @description: 图片预览
 */
// import "viewerjs/dist/viewer.css";
// import Viewer from "v-viewer";

/**
 * @description: 时区，暂时用不到，目前使用的bvue/use
 * 在服务器和客户端安装时间插件
 */
// import dayjs from 'dayjs'
// import utc from 'dayjs/plugin/utc'
// import timezone from 'dayjs/plugin/timezone'
// import customParseFormat from "dayjs/plugin/customParseFormat";
// dayjs.extend(utc)
// dayjs.extend(timezone)
// dayjs.extend(customParseFormat) // 解析自定义格式时间格式的插件

/**
 * @description: 全局的 loading 等待
 */

export default defineNuxtPlugin(async (nuxtApp) => {
  // 1. 图片预览
  // nuxtApp.vueApp.use(Viewer);
  // 2. 注册动画依赖
  nuxtApp.vueApp.use(Vue3Lottie);
  // 3. 添加全局方法 loading
  let modalInstance: any = null;
  nuxtApp.provide("showLoading", (val: any) => {
    let modalContainer: any;
    if (process.client) {
      if (!modalInstance) {
        modalContainer = document.createElement("div");
        modalContainer.className = "showLoading";
        document.body.appendChild(modalContainer);

        const modalInstance = createVNode(Loading, val);
        render(modalInstance, modalContainer);
      }
    }
    // 清除内容
    function close() {
      if (modalContainer) {
        render(null, modalContainer);
        modalContainer.remove();
        modalInstance = null;
        modalContainer = null;
      }
    }
    // 可以在这里暴露更多的控制方法，例如关闭弹窗
    return {
      close,
    };
  });
});
